<template>
  <div class="sellter-hub-view">
    <sellerhub-menu v-bind:fData="menuList"></sellerhub-menu>
    <div class="right">
      <keep-alive>
        <router-view />
      </keep-alive>
    </div>
  </div>
</template>
<script>
import sellerhubMenu from '@/layout/sellerHubMenu';
import { mapGetters } from 'vuex'

export default {
  components: {
    sellerhubMenu
  },
  data () {
    return {
      menuList: []
    }
  },
  methods: {
    initMenu (newVal) {
      console.log('initMenu 布局界面', newVal);
      this.menuList = newVal;
      let path = this.$route.path;
      let hasPath = false, firstPath = '';
      for (let i = 0; i < newVal.length; i++) {
        let item = newVal[i];
        if (i === 0) {
          if (item.children) {
            firstPath = item.children[0].url;
          }
        }
        if (item.url === path) {
          hasPath = true;
          break;
        }
        if (item.children) {
          for (let el of item.children) {
            if (el.url === path) {
              hasPath = true;
              break;
            }
          }
          if (hasPath) {
            break;
          }
        }
      }
      console.log(hasPath);
      if (!hasPath && this.menuList.length > 0) {
        this.$router.push(firstPath);
      }
    }
  },
  mounted () {
    this.initMenu(this.sellerMenu);
  },
  watch: {
    sellerMenu (newVal) {
      this.initMenu(newVal);
    }
  },
  computed: {
    ...mapGetters({
      'sellerMenu': 'unSave/sellerMenu'
    })
  }
}
</script>
<style lang="less" scoped>
.sellter-hub-view {
  overflow: hidden;
  position: relative;
  .menu {
    float: left;
  }
  .right {
    float: left;
    min-height: 40px;
    padding-top: 91px;
    padding-left: 178px;
    width: 100%;
    background-color: @sellerHubcolor;
    height: calc(100%);
  }
}
</style>
